import { Button, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import { getRoles } from '@/api/role';
import RoleForm from './components/RoleForm';
import { useLocation } from 'react-router';
import Styles from './index.module.css';
import useModal from '@/hooks/useModal';

export default function Role() {

  const locationInfo = useLocation();
  const { modal, contextHolder } = useModal();

  // 列表数据
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(true);

  const [show, setShow] = useState<boolean>(false);

  const [rowData, setRowData] = useState(null);

  // 初始化获取表单数据
  useEffect(() => {
    getRoles().then(({ data }) => {
      setTableData(data?.list || []);
    }).finally(() => {
      setLoading(false)
    })
  }, [])

  const onClose = () => {
    setShow(false);
    // 清空表单数据
    setRowData(null);
  }

  return (
    <div className={Styles.container}>

      {/* 标题 */}
      <div className={Styles.title}>
        {locationInfo?.state?.title || 'Role'}
      </div>

      <div className={Styles.mainContent}>
        {/* 操作栏 */}
        <div className={Styles.toolbar}>
          <Button type='primary' onClick={() => setShow(true)}>新增</Button>
        </div>

        {/* 表格 */}
        <div>
          <Table
            virtual
            loading={loading}
            scroll={{
              y: 500,
              // x: 1000,
            }}
            rowKey={"id"}
            dataSource={tableData}
            columns={[
              {
                title: '角色ID',
                key: 'id',
                dataIndex: 'id',
                render(_value, record: any, _index) {
                  return (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <img style={{ height: 48, width: 48, borderRadius: 8 }} src={record.avter} />
                      <span style={{ paddingInline: 4 }}>{record.id}</span>
                    </div>
                  )
                },
              },
              {
                title: '角色名称',
                key: 'name',
                dataIndex: 'name',
              },
              {
                title: '已绑定关联用户',
                key: 'count',
                dataIndex: 'count',
              },
              {
                title: '角色描述',
                key: 'desc',
                dataIndex: 'desc',
              },
              {
                title: '修改日期',
                key: 'updatedDate',
                dataIndex: 'updatedDate',

              },
              {
                title: '操作',
                key: 'options',
                dataIndex: 'dataIndex',
                render(_value, record: any, _index: number) {
                  return (
                    <Space>
                      <Button size='small' type='text' onClick={() => {
                        setShow(true);
                        setRowData(record)
                      }}>编辑</Button>
                      <Button size='small' type='text' onClick={() => {

                      }}>查看</Button>
                      <Button size='small' type='text' onClick={() => {
                        if (record.count) {

                          let confirmed = modal.confirm({
                            title: '提示',
                            content: '当前角色已存在关联用户，无法删除！',
                            closable: true,
                            footer: null,
                            onCancel: () => {
                              confirmed.destroy();
                            }
                          })
                        } else {
                          let confirmed = modal.confirm({
                            title: '提示',
                            content: '确定要删除当前选中角色吗？',
                            onOk: () => {
                              confirmed.destroy();
                            },
                            onCancel: () => {
                              confirmed.destroy();
                            }
                          })
                        }

                      }}>删除</Button>
                    </Space>
                  )
                }
              }
            ]}
          />
        </div>

        {/* 编辑、新增弹框 */}
        {
          show ? (
            <RoleForm
              rowData={rowData}
              onClose={onClose}
              onFinish={() => {

              }}
            />
          ) : null
        }
        {contextHolder}
      </div>
    </div>
  )
}